import React, { Component } from 'react';
import classnames from 'classnames';
import { router } from 'umi';
import { Row, Col, Icon, Input, Button } from 'antd';
import style from './index.css';
const { Search } = Input;

/**
 * Tpage 列表页 通用模版
 */
export default class TPage extends Component<any, {}> {
    // 列表 标题
    static Title = function ({ back = false, className = '', onBack = null, children }) {
        return <Title className={className} back={back} onBack={onBack as any}>{children}</Title>
    };

    // 列表 全量搜索
    static Search = function (props) {
        return <SSearch {...props} />
    }

    // 页面容器
    static Container = function ({ className, children }: any) {
        return <div className={classnames(style.tpage_container, className)}>{children}</div>
    }

    // 详情页 卡片
    static DescriptionCard = function (props) {
        return <SDescriptionCard {...props} />
    }

    // 列表 表格Layout
    static Table = function ({ className, children }: any) {
        return <div className={classnames(style.tpage_table, className)}>{children}</div>
    }

    static Layout = function ({ className, children }: any) {
        return <div className={classnames(style.tpage_layout, className)}>{children}</div>
    }

    public render() {
        const { className, children } = this.props;
        return (
            <div className={classnames(style.tpage, className)}>
                {children}
            </div>
        );
    }
}
interface _Title {
    className?: string,
    children?: React.ReactChildren,
    back?: boolean,
    onBack?: () => void
}
const Title: React.FC<_Title> = ({ className = '', children, back, onBack }) => {
    return (
        <div className={classnames(style.tpage_title, className)}>
            {back ? <Button type={'ghost'} style={{
                position: 'relative',
                bottom: '2px'
            }} onClick={onBack ? onBack : () => router.go(-1)}>
                <Icon type={'left'} />
                返回</Button> : null}
            {children}
        </div>
    );
}
interface _SSearch {
    className?: string,
    placeholder?: string,
    enterButton?: string | React.ReactNode,
    onSearch: (value) => void,
}
const SSearch: React.FC<_SSearch> = ({ className, placeholder, enterButton, onSearch, children }) => {
    return (
        <div className={classnames(style.tpage_search, className)}>
            <Search
                className={style.tpage_search_bar}
                placeholder={placeholder}
                enterButton={enterButton || <Icon type={'search'} />}
                allowClear={true}
                onSearch={onSearch}
            />
            { children ? <div className={style.ssearch_children}>{children}</div> : null }
        </div>
    );
}

type ColumnType = {
    label: string,
    key: string,
    type: 'text' | 'image'
}
interface _SDescriptionCard {
    className?: string,
    title: string,
    dataSource?: any[],
    columns?: ColumnType[]
}
const SDescriptionCard: React.FC<_SDescriptionCard> = ({ className = '', title, dataSource = {}, columns = [] }) => {
    let items: { label: string, value: any, type: 'text' | 'image' }[] = [];
    if (columns && columns.length) {
        for (const { label, key, type } of columns) {
            items.push({
                label,
                type,
                value: dataSource[key]
            })
        }
    }
    return (
        <div className={classnames(style.description_card, className)}>
            <div className={style.description_card_title}>{title}</div>
            {
                items.map(({ label, value, type }, index) => type === 'image' && value && !value.length ? null : <Row key={`item_${index}`} className={style.mt16}>
                    <Col span={2}><span className={style.label}>{label}</span></Col>
                    <Col span={22}>{type === 'image' ? (value || []).map((v, index) => < img key={`image_${index}`} className={style.image} src={v} />) : value}</Col>
                </Row>)}
        </div>
    );
}